<template>
  <q-dialog v-model="visible">
    <q-card style="min-width: 20rem" :class="ui.cardClass">
      <q-form @submit="modifyStatus">
        <q-card-section class="row items-center">
          <div class="text-h5">{{ $t(lang + "修改库位") }}</div>
          <q-space />
          <q-btn
            no-caps
            color="red"
            @click="clearStatus = true"
            type="submit"
            :label="$t(lang + '清空')"
            v-if="isShow"
          />
        </q-card-section>
        <q-separator />
        <q-card-section class="q-gutter-y-sm scroll fit">
          <!-- 类型 -->
          <q-input
            outlined
            v-model="statusInfo.type"
            :label="$t(lang + '类型')"
            lazy-rules
            :dark="ui.isDark"
            :rules="[(val) => !!val || $t(lang + '类型不能为空')]"
          />
          <!-- 数量 -->
          <q-input
            outlined
            :label="$t(lang + '数量')"
            v-model="statusInfo.used"
            :dark="ui.isDark"
            lazy-rules
            oninput="value=value.replace(/\D/g,'')"
            :rules="[
              (val) =>
                val <= statusInfo.capacity || $t(lang + '数量超过最大容量'),
              (val) => val !== '' || $t(lang + '数量不能为空'),
            ]"
          >
            <template v-slot:label>
              <div>{{ $t(lang + "当前数量") }}</div>
            </template>
            <template v-slot:default>
              <span
                class="fit text-center column justify-center text-grey-5"
                style="font-size: 1rem"
                >{{ $t(lang + "最大容量") }} {{ statusInfo.capacity }}</span
              >
            </template>
          </q-input>
        </q-card-section>
        <!-- 提交修改 -->
        <q-card-actions class="q-pa-none">
          <q-btn
            no-caps
            color="primary"
            class="fit"
            :label="$t(lang + '修改库位')"
            @click="clearStatus = false"
            size="md"
            type="submit"
            :class="ui.btnClass"
          />
        </q-card-actions>
      </q-form>
      <!--      loading -->
      <q-inner-loading :showing="loading" label-class="text-teal text-h5" />
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useQuasar } from "quasar";
import { api } from "boot/axios";
import { useAPIStore } from "stores/api/index.js";
import { ref } from "vue";
import { useUiStore } from "stores/ui";
import { useI18n } from "vue-i18n";

const t = useI18n().t; // 语言包
const lang = "amrControl.modifiedState."; // 用于多语言取值的简写,当前路由 加 当前组件首字母
const $q = useQuasar();
const ui = useUiStore();
const visible = ref(false); // 弹窗显示
const loading = ref(false); // loading状态
const statusInfo = ref({}); // 状态信息
const clearStatus = ref(false); // 是否是清空状态
const isShow = ref(false); // 是否显示清空按钮

defineExpose({ show });

function show(item) {
  visible.value = true;
  statusInfo.value = item;
  // 判断是否类型和数量存在，存在显示清空否则不显示
  isShow.value = !!(statusInfo.value.type && statusInfo.value.used);
}

// 修改
function modifyStatus() {
  $q.dialog({
    title: !clearStatus.value
      ? t(lang + "是否修改库位")
      : t(lang + "是否清空库位"),
    ok: t("ok"),
    dark: ui.isDark,
    cancel: t("cancel"),
  }).onOk(() => {
    loading.value = true;
    statusInfo.value.used = Number(statusInfo.value.used);
    api
      .post(
        useAPIStore().amrUrl + "ros/call",
        {
          type: statusInfo.value.type,
          id: statusInfo.value.id,
          used: clearStatus.value ? 0 : statusInfo.value.used,
        },
        { params: { service: "modify_local_storage" } }
      )
      .then((res) => {
        if (res.data.values.result === "success") {
          $q.notify({ message: t(lang + "修改成功"), type: "positive" });
        } else {
          $q.notify({ message: t(lang + "修改失败"), type: "positive" });
        }
        loading.value = false;
        visible.value = false;
      })
      .catch(() => {
        $q.notify({ message: t("RequestError"), type: "positive" });
      });
  });
}
</script>
